<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 %>
<html xmlns="http://www.w3.org/1999/xhtml" style="width:300px;">
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery的树形菜单代码 </title>
<style>
body { font-family:"宋体"; font-size: 12px; line-height: 1.5em; color:#7FB0C8; padding:0; margin:0; background: #00;}
ul,ol,li,dl,dt,dd { margin:0; padding:0; list-style-type:none;}
h1,h2,h3,form,input,iframe,span { margin:0; padding:0;} 
a { color:#7FB0C8;}
a:link {color: #7FB0C8; TEXT-DECORATION: none;}
a:visited {color: #7FB0C8; TEXT-DECORATION: none;}
a:hover {color: #fff; TEXT-DECORATION: none;}
.white { color:#fff;}
.white a:link {color: #fff; TEXT-DECORATION: none;}
.white a:visited {color: #fff; TEXT-DECORATION: none;}
.white a:hover {color: #73E1F5; TEXT-DECORATION: none;}
/* 树形菜单开始 */
.close { float:right; clear:right; font-size:12px; font-weight:normal; cursor:pointer; color:green; padding-right:10px;position: relative; right: 30px;}
.title { font-size:14px; color:#fff; margin-bottom:10px; padding-left:5px; width:290px;}
.menu { width:290px; height:600px; overflow-y:auto; overflow-x:hidden; margin-bottom:10px;}
.menu { SCROLLBAR-FACE-COLOR: #002537; SCROLLBAR-HIGHLIGHT-COLOR: #002537; SCROLLBAR-SHADOW-COLOR: #0E6893; SCROLLBAR-3DLIGHT-COLOR: #0E6893; SCROLLBAR-ARROW-COLOR: #fff; SCROLLBAR-TRACK-COLOR: #053d58;SCROLLBAR-DARKSHADOW-COLOR: #002537; SCROLLBAR-BASE-COLOR: #01152a;}
.l1 { background:fff; font-size:13px; padding:5px 0 0 30px; height:20px; margin-bottom:5px; cursor:pointer;}
.slist { margin:0 0 5px 0; display:block;}
.l2 { padding:0 0 0 35px; font-size:13px;}
.l2 a { padding:6px 0 0 5px; width:230px; height:21px; display:block;} 
.currentl2 a,.l2 a:hover { background:#1E5A82; color:#fff;}
.sslist { background:#156890; width:235px; overflow:hidden; margin:0 0 5px 35px; display:block;}
.l3 a { padding:6px 0 0 5px; width:230px; height:20px; display:block;} 
.currentl3 a,.l3 a:hover { color:#fff; font-weight:bold;}
</style>
<!-- <script type="text/javascript" src="<%=path %>/js/jquery1.3.2.js"></script> -->
<script>
// 树状菜单
$(document).ready(function(){
 // $(".l1").toggle(function(){
 //  $(".slist").animate({height: 'toggle', opacity: 'hide'}, "slow");
 // $(this).next(".slist").animate({height: 'toggle', opacity: 'toggle'}, "slow");
 // },function(){
 //  $(".slist").animate({height: 'toggle', opacity: 'hide'}, "slow");
 //   $(this).next(".slist").animate({height: 'toggle', opacity: 'toggle'}, "slow");
 // });
 $(".l2").toggle(function(){
 $(this).next(".sslist").animate({height: 'toggle', opacity: 'toggle'}, "slow");
 },function(){
   $(this).next(".sslist").animate({height: 'toggle', opacity: 'toggle'}, "slow");
 });
/* $(".l2").click(function(){
 $(".l3").removeClass("currentl3");
 $(".l2").removeClass("currentl2");
 $(this).addClass("currentl2");
 }); 
 /*$(".l3").click(function(){
 $(".l3").removeClass("currentl3");   
 $(this).addClass("currentl3");
 }); */
 $(".close").toggle(function(){
 $(".slist").animate({height: 'toggle', opacity: 'hide'}, "fast"); 
 $(".sslist").animate({height: 'toggle', opacity: 'hide'}, "fast"); 
  },function(){
 $(".slist").animate({height: 'toggle', opacity: 'show'}, "fast"); 
 $(".sslist").animate({height: 'toggle', opacity: 'show'}, "fast"); 
 }); 
});
</script>
</head>
<body>
<h1 class="title"><span id="myOnclick"  class="close">全部收起/展开</span>树形菜单</h1>
<script>
$(".close").dblclick();
$(".close").click();
$(".close").click();
</script>
<div class="menu">
  <h1 class="l1">我的摊子</h1>
 <div class="slist">
 <h2 class="l2"><a id="myA" href="input_item?sellOrBuy=sell" target="myiframe2">添加出租物品</a></h2>
 <h2 class="l2"><a href="input_item?sellOrBuy=buy" target="myiframe2">添加求购</a></h2>
 </div>
 
 <h1 class="l1">逛逛</h1>
 <div class="slist">
 <h2 class="l2"><a href="<%=path %>/index/cellContent.jsp?sellOrBuy=shop" target="myiframe2">店铺</a></h2>

 <h2 class="l2"><a href="<%=path %>/index/cellContent.jsp?sellOrBuy=free" target="myiframe2">免费赠送</a></h2>
 <h2 class="l2"><a href="<%=path %>/index/cellContent.jsp?sellOrBuy=sell" target="myiframe2">出租</a></h2>
 <h2 class="l2"><a href="<%=path %>/index/cellContent.jsp?sellOrBuy=buy" target="myiframe2">求购</a></h2>
 </div>
 <h1 class="l1">社交圈子</h1>
 <div class="slist">
 <h2 class="l2"><a href="<%=path %>/message/show_send_message" target="myiframe2">发件箱</a></h2>
 <h2 class="l2"><a href="<%=path %>/message/show_rec_message"  target="myiframe2">收件箱</a></h2>
 <h2 class="l2"><a href="<%=path %>/show_fans"  target="myiframe2">我的粉丝</a></h2>
<h2 class="l2"><a href="<%=path %>/show_faned"  target="myiframe2">我的关注</a></h2>
 </div>
 <h1 class="l1">摊子里的物品</h1>
 <div class="slist">
 <h2 class="l2"><a href="show_owner_item?ownSellOrBuy=sell" target="myiframe2">我的出租</a></h2>
 <h2 class="l2"><a href="show_owner_item?ownSellOrBuy=buy" target="myiframe2">我的求购</a></h2>
 </div>
 <h1 class="l1">个人资料</h1>
 <div class="slist">
 <h2 class="l2"><a href="<%=path %>/index/updatePass.jsp" target="myiframe2">修改密码</a></h2>
 </div>
 
</div>
<!-- <div>
 		<iframe name="myiframe" width="350" frameborder="no" height="400" frameborder="1" src="#" scrolling="no" border="0"></iframe>
 </div>
 <h1><a href="1.htm" target="_blank">W3School</a></h1>
  <h4 class="l2"><a href="http://www.w3school.com.cn" target="_blank">二级菜单4</a></h4> -->
</body>

</html>